Dashboard Temp Share Shortlinks Frames API

HTMLify

Character counter..html
Views: 556 | Author: sachinthakur 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Real-time Charater Counter</title>
  </head>
  <body>
    <div class="container">
      <h2>Real-time Charater Counter</h2>
      <textarea
        id="textarea"
        class="textarea"
        placeholder="Please write your text here..."
        maxlength="5000"
      ></textarea>
      <div class="counter-container">
        <p>
          Total Charaters:
          <span class="total-counter" id="total-counter"></span>
        </p>
        <p>
          Remaining:
          <span class="remaining-counter" id="remaining-counter"></span>
        </p>
      </div>
    </div>

  </body>
</html>
<style>
body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  background-color: salmon;
  font-family: cursive;
}

.container {
  background-color: lightpink;
  width: 400px;
  padding: 20px;
  margin: 5px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.textarea {
  resize: none;
  width: 100%;
  height: 100px;
  font-size: 18px;
  font-family: sans-serif;
  padding: 10px;
  box-sizing: border-box;
  border: solid 2px darkgray;
}

.counter-container {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}

.counter-container p {
  font-size: 18px;
  color: gray;
}

.total-counter {
  color: slateblue;
}

.remaining-counter {
  color: orangered;
}
</style>

<script>
const textareaEl = document.getElementById("textarea");
const totalCounterEl = document.getElementById("total-counter");
const remainingCounterEl = document.getElementById("remaining-counter");

textareaEl.addEventListener("keyup", () => {
  updateCounter();
});

updateCounter()

function updateCounter() {
  totalCounterEl.innerText = textareaEl.value.length;
  remainingCounterEl.innerText =
    textareaEl.getAttribute("maxLength") - textareaEl.value.length;
}
</script>

Share this file: